<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- <title>ECharts</title> -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <!-- Bootstrap CSS -->
    <link href="./css/bootstrap.min.css" rel="stylesheet" >
    <!-- <script type="text/javascript" src="./lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="./js/xadmin.js"></script> -->
    <link rel="stylesheet" href="./css/tablestyle.css">
    <link rel="stylesheet" href="./css/formSelects-v4.css" />

    <title> rule_diagnosis</title>
    <style>
    html,body{
        display: flex;
        height: 750px;
        justify-content: center;
        align-items: center;
        background-image: url("../images/fac.jpg"); 
    }
        .flex-container {
            display: flex;
            /* justify-content: space-around;  */
            flex-direction: row;
            flex-wrap: wrap;
            width: 950px;
            margin-top: 10%;
            height: 110%;
            background-color: rgb(255, 255, 255);
        }
        .flex-container_2 {
            display: flex;
            /* justify-content: space-around;  */
            flex-direction: column;
            flex-wrap: wrap;
            width: 460px;
            margin-top: 10%;
            height: 110%;
            background-color: rgb(255, 255, 255);
        }
        .flex-container_2 .flex-item {
            width: 450px;
            height: 30%;
            /* margin-top: 5px; */
            margin-bottom: 10px;
            margin-left: 10px;
            /* flex-grow:2; */
            /* border-radius: 5%; */
            background-color:rgba(247, 245, 252);
        }
        .flex-container .flex-item_4 {
            width: 450px;
            height: 45%;
            margin: 10px;
            /* flex-grow:2; */
            border-radius: 5%;
            background-color:rgb(247, 245, 252);
        }
        .flex-container .flex-item_6 {
            width: 450px;
            height: 45%;
            margin: 10px;
            /* flex-grow:2; */
            border-radius: 5%;
            background-color:rgb(247, 245, 252);
        }
        .flex-container .flex-item1 {
            width: 500px;
            height: 45%;
            margin-left: 50px;
            /* flex-grow:2; */
            border-radius: 5%;
            background-color:rgb(247, 245, 252);
        }
        .flex-container .flex-item2 {
            width: 550px;
            height: 47%;
            margin-bottom: 20px;
            margin-left: 10px;
            border-radius: 5%;
            flex-grow:0.8;
            background-color:rgb(247, 245, 252);
        }
        .flex-container .flex-item2 .title span{
            font-size: 20px;
            font-weight: 800;
        }
        .flex-container_2 .flex-item3 {
            width: 450px;
            height: 35%;
            margin: 10px;
            /* flex-grow:2; */
            border-radius: 5%;
            background-color:rgb(247, 245, 252);
        }
        .flex-container_2 .flex-item3 .title span{
            font-size: 20px;
            font-weight: 800;
            padding: 20px;
        }
        .flex-container_2 .flex-item3 .btn{
            /* display: inline-block; */
            margin: 8px;
            margin-top: 15px;
        }
        .flex-container_2 .flex-item5 {
            width: 450px;
            height: 30%;
            margin-left: 10px;
            /* border-radius: 5%; */
            /* flex-grow:2; */
            background-color:rgb(247, 245, 252);
        }
        
    </style>
    <!-- 引入 echarts.js -->
    <script src="./js/echarts.min.js"></script>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
    <script>
    MathJax = {
        tex: {inlineMath: [['$', '$'], ['\\(', '\\)']]}
    };
    </script>
    <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>
</head>
<body>
    <div class="flex-container">   
        <div id="main3" class="flex-item_6"></div>
        <div id="main1" class="flex-item_4"></div>
        <div id="app" class="flex-item2">
            <div class="title"><span>操作日志</span></div>
                <div class="table_position">
                    <table class="table table-hover table-striped">
                        <thead>
                            <tr>
                                <th scope="col">序号</th>
                                <th scope="col">设备地点</th>
                                <th scope="col">监测设备</th>
                                <th scope="col">测点名称</th>
                                <th scope="col">诊断结果</th>
                                <th scope="col">操作人员</th>
                                <th scope="col">操作日期</th>
                                <th scope="col">设备状况</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="l in dinary">
                                <th scope="row">{{l.idx}} </th>
                                <td>{{l.pst}} </td>
                                <td>{{l.eqt}}</td>
                                <td>{{l.nam}}</td>
                                <td>{{l.R}}</td>
                                <td>{{l.peo}}</td>
                                <td>{{l.dat}}</td>
                                <td>{{l.con}}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div>
                    <button type="button" class="btn btn-primary" @click="checking">更新日志</button>
                    <button type="button" class="btn btn-danger" @click="clear">清除日志</button>
                </div>
        </div>
    </div>
    <div class='flex-container_2'>
        <div class="flex-item3">
            <div class="title"><span>选择设备</span></div>         
            <div style=" display: inline-block; width: 300px; margin: 15px; vertical-align: top;">
                <div class="layui-form">
                    <!-- <select style="width:200px;"></select> -->
                    <select name="city" xm-select="select1" xm-select-max="1" xm-select-direction="down">
                        <option value="">请选择需要诊断的设备</option>
                    </select>
                </div> 
            </div>
            <button  type="button" class="btn btn-primary" onclick= "myFunction()">CNN诊断</button>
            <div class="card" style="width: 24rem; margin-left: 35px; background-color: #d4f1f1;"> 
                <div class="card-body">
                    <h5 class="card-title"> <span class="name">CNN参数设置</span></h5>
                    <span style="float: left; height: 34px; width: 115px; line-height: 34px;">数据截取长度：</span>
                    <input id="tag1" style="width:calc(80% - 50px);resize:none; height: 34px; float: right" maxlength="10" value = 100000>
                    <span style="float: left; height: 34px; width: 115px; line-height: 34px;">样本数设置</span>
                    <input id="tag2" style="width:calc(80% - 50px);resize:none; height: 34px; float: right" maxlength="10" value = 100>
                    <span style="float: left; height: 34px; width: 115px; line-height: 34px;">诊断精度</span>
                    <input id="tag3" style="width:calc(80% - 50px);resize:none; height: 34px; float: right" maxlength="10" value = 90% disabled>
                </div>     
            </div>                           
        </div>
        <div class="flex-item5">
            <div class="card" style="width: 24rem; margin-left: 35px; margin-top: 10px; background-color: #bee0f0;">
            <div class="card-body">
                <h5 class="card-title"> <span class="name">CNN重训练设置</span></h5>
                <span style="float: left; height: 40px; width: 115px; line-height: 34px;">优化算法选择：</span>
                <div class="dropdown">
                    <button class="btn btn-outline-dark dropdown-toggle" style="width:calc(70% - 35px); resize:none; height: 32px; float: right ; margin:5px" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-expanded="false">
                        优化算法类型
                    </button>
                    <ul class="dropdown-menu dropdown-menu" aria-labelledby="dropdownMenuButton2">
                      <li><a class="dropdown-item active" href="#">Adam算法</a></li>
                      <li><a class="dropdown-item" href="#">SGD算法</a></li>
                      <li><a class="dropdown-item" href="#">Adadelta算法</a></li>
                    </ul>
                  </div>
                <span style="float: left; height: 40px; width: 110px; line-height: 34px;">迭代次数：</span>
                <input id="tag2" style="width:calc(70% - 30px);resize:none; height: 34px; float: right;margin:2px" maxlength="10" value = 300>
                <span style="float: left; height: 40px; width: 120px; line-height: 34px;">每种故障样本数:</span>
                <input id="tag3" style="width:calc(70% - 30px);resize:none; height: 34px; float: right; margin:2px" maxlength="10" value = 300>
                <button class="btn btn-primary" style="width:30%; resize:none; height: 35px; margin-top:7px; margin-left:0" type="button" onclick= "mytraning()">
                    开始训练
                </button>
                </div> 
            </div>
        </div>
        <div id="main2" class="flex-item"></div>
    </div>
         
    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="./js/bootstrap.bundle.min.js" ></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                machine:[{position:"防爆（蒸馏）",equi:"机封水泵",name:"电机自由端1H",Result:"设备正常",people:"张三",date:"2020-10-10",condition:"优"},
                    {position:"防爆（蒸馏）",equi:"机封水泵",name:"电机负荷端2H",Result:"轴承内圈故障",people:"张三",date:"2020-10-11",condition:"中"},
                    {position:"防爆（蒸馏）",equi:"机封水泵",name:"泵负荷端3V",Result:"轴承内圈故障",people:"张三",date:"2020-10-12",condition:"中"},
                    {position:"防爆（蒸馏）",equi:"机封水泵",name:"泵负荷端3V",Result:"轴承滚动体故障",people:"张三",date:"2020-10-13",condition:"中"},
                    {position:"防爆（蒸馏）",equi:"二精塔循环泵",name:"电机自由端1H",Result:"设备正常",people:"张三",date:"2020-12-14",condition:"优"},
                    {position:"防爆（蒸馏）",equi:"二精塔循环泵",name:"电机负荷端2H",Result:"设备正常",people:"张三",date:"2021-2-15",condition:"优"},
                    {position:"防爆（蒸馏）",equi:"二精塔循环泵",name:"泵负荷端3V",Result:"轴承外圈故障",people:"张三",date:"2021-3-10",condition:"中"},
                    {position:"防爆（蒸馏）",equi:"二精塔循环泵",name:"泵负荷端3V",Result:"轴承外圈故障",people:"张三",date:"2021-4-10",condition:"中"},],
                dinary:[{idx:1,pst:"防爆（蒸馏）",eqt:"机封水泵",nam:"电机自由端1H",R:"设备正常",peo:"张三",dat:"2020-10-10",con:"优"}]
            },
            methods:{
                update_dinary:function(item){
                    // item,err,val
                    var L = this.dinary.length+1;
                    // console.log(L);
                    this.dinary.push({idx:L,pst:item.position,eqt:item.equi,nam:item.name,R:item.Result,peo:item.people,dat:item.date,con:item.condition});
                    // this.dinary.push({idx:5,pst:"防爆（蒸馏）",eqt:"机封水泵",pot:"驱动端",err:"均方根值", val:5.27});
                },
                checking:function(){
                    this.machine.forEach(element => {
                        // console.log(element);
                        this.update_dinary(element);
                    });
                },
                clear:function(){
                    this.dinary.splice(0,this.dinary.length);
                }
            }
        })
    </script>

    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
    <script>
        var chartDom = document.getElementById('main1');
        var myChart1 = echarts.init(chartDom);
        var option_1;

            option_1 = {
                title: {
                text: '设备故障类型CNN诊断概率',
                //subtext: 'Example in MetricsGraphics.js',
                left: 'left',
                padding: 15
            },
                tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
            type: 'category',
            data: ['设备正常', '轴承内圈故障', '轴承外圈故障', '轴承滚动体故障', '轴承保持架故障'],
            axisLabel: {
            fontWeight:'bold',
            fontSize:10,
            interval:0
            },
            axisTick: {
                alignWithLabel: true
            }
        }
    ],
            yAxis: [
                {
            type: 'value',
            axisLabel: {
            fontWeight:'bold',
            fontSize:13
            },
            max:1
                 }
    ],
            series: [
                {
            type: 'bar',
            barWidth: '40%',
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                        offset: 0,
                        color: "rgba(67, 148, 80)" // 0% 处的颜色
                    }, {
                        offset: 1,
                        color: "rgba(124, 209, 116)" // 100% 处的颜色
                    }], false)
                }
            },
            data: [0.8,0.15,0.05,0.7,0.5]
        },
        {
            type: 'line',
            symbol: 'triangle',
            symbolSize: 10,
            itemStyle: {
            borderWidth: 0,
            borderColor: '#000',
            color: '#ffd300'
            },
            data:[0.8,0.15,0.05,0.7,0.5]
        }
    ]
};
    </script>
        <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
        <script>
            var chartDom = document.getElementById('main2');
            var myChart2 = echarts.init(chartDom);
            var option_2;

option_2 = {
    tooltip: {
        trigger: 'axis'
    },
    title:{
        left:'35%',
        top:'5%',
        text:'CNN训练损失图'
    },
    xAxis: [{
        type: 'category',
        data: [],
        axisLine: {
            lineStyle: {
                color: "#999"
            }
        }
    }],
    yAxis: [{
        show:true,
        type: 'value',
        splitNumber: 4,
        splitLine: {
            lineStyle: {
                type: 'dashed',
                color: '#DDD'
            }
        },
        axisLine: {
            show: false,
            lineStyle: {
                color: "#333"
            },
        },
        nameTextStyle: {
            color: "#999"
        },
        splitArea: {
            show: false
        }
    }],
    series: [{
        name: 'loss',
        type: 'line',
        data: [],
        lineStyle: {
            normal: {
                width: 3,
                color: {
                    type: 'linear',

                    colorStops: [{
                        offset: 0,
                        color: '#A9F387' // 0% 处的颜色
                    }, {
                        offset: 1,
                        color: '#48D8BF' // 100% 处的颜色
                    }],
                    globalCoord: false // 缺省为 false
                }
            }
        },
        itemStyle: {
            normal: {
                color: '#fff',
                borderWidth: 10,
                /*shadowColor: 'rgba(72,216,191, 0.3)',
                shadowBlur: 100,*/
                borderColor: "#A9F387"
            }
        },
        smooth: true
    }]
};
option_2 && myChart2.setOption(option_2);
    </script>

</script>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
<script>
    var chartDom = document.getElementById('main3');
    var myChart3 = echarts.init(chartDom);
    var option_3;

option_3 = {
       title:{
        text: "CNN网络模型结构分解图",
        top: "top",
        left: "center"
    },
      tooltip: {},
      legend: [{
          formatter: function (name) {
        return echarts.format.truncateText(name, 40, '11px Microsoft Yahei', '…');
    },
    tooltip: {
        show: true
    },
          selectedMode: 'false',
          bottom: 20,
          data: ['卷积层Cov','池化层Pol','全连接层Des','激活层Act','丢弃层Drp','分类层Softmax']
      }],
      toolbox: {
        show : true,
        feature : {
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
      animationDuration: 1000,
      animationEasingUpdate: 'quinticInOut',
      series: [{
          name: 'CNN网络',
          type: 'graph',
          layout: 'force',

          force: {
              repulsion: 60,
              gravity:0.03
          },
          data: [{
              "name": "CNN网络",
              // "x": 0,
              // y: 0,
              "symbol":'circle',
              "symbolSize": 30,
              "draggable": "true"

          }, {
              "name": "卷积层Cov",
              "symbolSize": 25,
              "symbol":'rect',
              "category": "卷积层Cov",
              "draggable": "true"
          }, {
              "name": "卷积层_1@5×1,32",
              "symbolSize": 15,
              "symbol":'rect',
              "category": "卷积层Cov",
              "draggable": "true"
          }, {
              "name": "卷积层_2@2×1,64",
              "symbolSize": 15,
              "symbol":'rect',
              "category": "卷积层Cov",
              "draggable": "true"
          }, {
            "name": "卷积层_3@2×1,64",
              "symbolSize": 15,
              "symbol":'rect',
              "category": "卷积层Cov",
              "draggable": "true"
          }, {
              "name": "池化层Pol",
              "symbolSize": 25,
              "symbol":'triangle',
              "category": "池化层Pol",
              "draggable": "true"
          }, {
              "name": "Max池化层_1@2×1",
              "symbolSize": 15,
              "symbol":'triangle',
              "category": "池化层Pol",
              "draggable": "true"
          }, {
            "name": "Max池化层_2@2×1",
              "symbolSize": 15,
              "symbol":'triangle',
              "category": "池化层Pol",
              "draggable": "true"
          }, {
            "name": "Max池化层_3@2×1",
              "symbolSize": 15,
              "symbol":'triangle',
              "category": "池化层Pol",
              "draggable": "true"
          }, {
              "name": "全连接层Des",
              "symbolSize": 25,
              "symbol":'diamond',
              "category": "全连接层Des",
              "draggable": "true"
          }, {
              "name": "全连接层_1@100",
              "symbolSize": 15,
              "symbol":'diamond',
              "category": "全连接层Des",
              "draggable": "true"
          },{
              "name": "全连接层_2@类别数",
              "symbolSize": 15,
              "symbol":'diamond',
              "category": "全连接层Des",
              "draggable": "true"
          }, {
              "name": "激活层Act",
              "symbol":'pin',
              "symbolSize": 25,
              "category": "激活层Act",
              "draggable": "true"
          }, {
              "name": "激活函数Relu_1",
              "symbolSize": 15,
              "symbol":'pin',
              "category": "激活层Act",
              "draggable": "true"
          },{
              "name": "激活函数Relu_2",
              "symbolSize": 15,
              "symbol":'pin',
              "category": "激活层Act",
              "draggable": "true"
          },{
              "name": "激活函数Relu_3",
              "symbolSize": 15,
              "symbol":'pin',
              "category": "激活层Act",
              "draggable": "true"
          }, {
              "name": "丢弃层Drp",
              "symbol":'arrow',
              "symbolSize": 25,
              "category": "丢弃层Drp",
              "draggable": "true"
          }, {
              "name": "丢弃层_1@50%",
              "symbol":'arrow',
              "symbolSize": 15,
              "category": "丢弃层Drp",
              "draggable": "true"
          }, {
              "name": "丢弃层_2@50%",
              "symbol":'arrow',
              "symbolSize": 15,
              "category": "丢弃层Drp",
              "draggable": "true"
          }, {
              "name": "分类层Softmax",
              "value": 10,
              "symbolSize": 25,
              "category": "分类层Softmax",
              "draggable": "true"
          }, {
              "name": "Class类别_1",
              "symbolSize": 15,
              "category": "分类层Softmax",
              "draggable": "true"
          }, {
              "name": "Class类别_2",
              "symbolSize": 15,
              "category": "分类层Softmax",
              "draggable": "true"
          }, {
              "name": "Class类别_3",
              "symbolSize": 15,
              "category": "分类层Softmax",
              "draggable": "true"
          }, {
              "name": "Class类别_4",
              "symbolSize": 15,
              "category": "分类层Softmax",
              "draggable": "true"
          }, {
              "name": "Class类别_5",
              "symbolSize": 15,
              "category": "分类层Softmax",
              "draggable": "true"
          }],
          links: [{
              "source": "CNN网络",
              "target": "卷积层Cov"
          }, {
              "source": "卷积层Cov",
              "target": "卷积层_1@5×1,32"
          }, {
              "source": "卷积层Cov",
              "target": "卷积层_2@2×1,64"
          }, {
              "source": "卷积层Cov",
              "target": "卷积层_3@2×1,64"
          }, {
              "source": "CNN网络",
              "target": "池化层Pol"
          }, {
              "source": "池化层Pol",
              "target": "Max池化层_1@2×1"
          }, {
              "source": "池化层Pol",
              "target": "Max池化层_2@2×1"
          }, {
              "source": "池化层Pol",
              "target": "Max池化层_3@2×1"
          }, {
              "source": "CNN网络",
              "target": "全连接层Des"
          }, {
              "source": "全连接层Des",
              "target": "全连接层_1@100"
          }, {
              "source": "全连接层Des",
              "target": "全连接层_2@类别数"
          }, {
              "source": "CNN网络",
              "target": "激活层Act"
          }, {
              "source": "激活层Act",
              "target": "激活函数Relu_1"
          }, {
              "source": "激活层Act",
              "target": "激活函数Relu_2"
          }, {
              "source": "激活层Act",
              "target": "激活函数Relu_3"
          }, {
              "source": "CNN网络",
              "target": "丢弃层Drp"
          }, {
              "source": "丢弃层Drp",
              "target": "丢弃层_1@50%"
          }, {
              "source": "丢弃层Drp",
              "target": "丢弃层_2@50%"
          }, {
              "source": "CNN网络",
              "target": "分类层Softmax"
          }, {
              "source": "分类层Softmax",
              "target": "Class类别_1"
          }, {
              "source": "分类层Softmax",
              "target": "Class类别_2"
          }, {
              "source": "分类层Softmax",
              "target": "Class类别_3"
          }, {
              "source": "分类层Softmax",
              "target": "Class类别_4"
          }, {
              "source": "分类层Softmax",
              "target": "Class类别_5"
          }],
          categories: [{
              'name': '卷积层Cov'
          }, {
              'name': '池化层Pol'
          }, {
              'name': '全连接层Des'
          }, {
              'name': '激活层Act'
          }, {
              'name': '丢弃层Drp'
          }, {
              'name': '分类层Softmax'
          }],
          focusNodeAdjacency: true,
          roam: true,
        //   label: {
        //       normal: {

        //           show: true,
        //           position: 'top',

        //       }
        //   },
          lineStyle: {
              normal: {
                  color: 'source',
                  curveness: 0.2,
                  type: "solid"
              }
          }
      }]
  };
option_3 && myChart3.setOption(option_3);
</script>

    <script>
        function myFunction(){
            var tmp_1 = Math.random(). toFixed(2) ;
            var tmp_2 = Math.random() .toFixed(2) ;
            var tmp_3 = Math.random() .toFixed(2) ;
            var tmp_4 = Math.random() .toFixed(2) ;
            var tmp_5 = Math.random() .toFixed(2) ;
            var axisData = (new Date()).toLocaleTimeString().replace(/^\D*/, '');

            option_1.series[0].data[0] = tmp_1;
            option_1.series[0].data[1] = tmp_2;
            option_1.series[0].data[2] = tmp_3;
            option_1.series[0].data[3] = tmp_4;
            option_1.series[0].data[4] = tmp_5;

            option_1.series[1].data[0] = tmp_1;
            option_1.series[1].data[1] = tmp_2;
            option_1.series[1].data[2] = tmp_3;
            option_1.series[1].data[3] = tmp_4;
            option_1.series[1].data[4] = tmp_5;

            myChart1.setOption(option_1, true);

            document.getElementById('tag3').value = Math.random().toFixed(2)*100+'%';
        } 

        function mytraning(){
        var loss;
        var times;
        loss = [];
        times = [];

        for (let i = 1,j = Math.random().toFixed(2); i <= 300; i++) {
            times.push(i);
            loss.push(j);
            j =j /1.02; 
        }

        myChart2.setOption({
        xAxis: {
            data: times
        },
        series: [{
            data: loss,
            animationDelay: function (idx) {
            return idx * 10;
            }
            }],
        animationEasing: 'linear',
        animationDelayUpdate: function (idx) {
        return idx * 5;
        }
        });
        } 
        option_1 && myChart1.setOption(option_1);   
    </script>



    <script src="../js/layui.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/formSelects-v4.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        var formSelects = layui.formSelects;
        formSelects.data('select1', 'local', {
            arr: [
                {
                    "name": "蒸馏（防爆）", 
                    "value": 1, 
                    "children": [
                        {"name": "机封水泵", "value": 12, "children": []},
                        {"name": "二精塔循环泵", "value": 17, "children": []},
                        {"name": "粗塔循环泵", "value": 18, "children": []},
                    ]
                },
                {
                    "name": "饲料", 
                    "value": 2, 
                    "children": [
                        {"name": "风送（风机）", "value": 51, "children": []},
                    ]
                },
                {
                    "name": "空压冷冻站", 
                    "value": 3, 
                    "children": [
                        {"name": "工艺空气压缩机", "value": 13, "children": []},
                        {"name": "仪表空气压缩机", "value": 14, "children": []},
                    ]
                },
            ],
            linkage: true   //开启联动模式
        });
    </script>

</body>
</html>
